<template>
  <div>
    <HomeHeader />
    <div class="main">
      <!-- 利用swiper组件 -->
      <van-swipe>
        <van-swipe-item v-for="item in arr" :key="item" class="swiper-li">
          <img :src="item" alt="">
        </van-swipe-item>
        
      </van-swipe>
    </div>
    <Tabbar></Tabbar>
  </div>
</template>

<script>
import Tabbar from "@/components/Tabbar";
import HomeHeader from "./components/HomeHeader";
import axios from 'axios'
export default {
 data(){
   return {
     arr:[]
   }
 },
  //准备发送ajax请求图片
  created(){
    this.fetchBannerData()
  },
  methods:{
    fetchBannerData(){
     axios.get("/brayden/banner/list").then(res=>{
        res.data.data.forEach((el,index)=>{
          return this.arr.push(el.picUrl)
        })
      })
    }
  },
  components: {
    Tabbar,
    HomeHeader
  }
}
</script>

<style lang="scss" scoped>
  @import "../../assets/css/common.css";
  .swiper-li img{
    height:183px;
  }

</style>